﻿
/*#region POUR NOUS CONTACTER FORMULAIRE*/

	.pourNousContacterForm {
		margin:80px auto 0px auto; /*padding:50px 100px 80px 100px; padding:40px 7.966%;*/ padding:3.10077519379845% 2.325581395348837%;
		border-radius:20px;
		background-color:#1D3FA0;
		transition:0.3s ease-out;
		max-width:1200px;
	}

	.pourNousContacterForm > * {
		margin:auto auto;
		max-width:1000px;
	}

		.pourNousContacterForm .titre {
			font-size:2.75rem; font-weight:700; color:#F5F0E6; line-height:0.9; text-transform:uppercase;
			margin-bottom:20px;
			text-align:center;
		}

		.pourNousContacterForm .ligne {
			display:table; width:100%;
			padding:10px 0;
			font-size:0;
			transition:0.3s ease-out;
		}

		.pourNousContacterForm .ligne.lg3 {
			margin:10px 0;
		}

		.pourNousContacterForm .ligne4 {
			position:relative;
			display:block;
			padding:20px 0;
			font-size:0;
			transition:0.3s ease-out;
		}

		.pourNousContacterForm .obligatoire { font-size:1.1875rem; color:#E85A2C; }

			.pourNousContacterForm .trait {
				width:100%;
				margin:0;
				border:0.1px solid #F5F0E6;
			}

			.pourNousContacterForm .colonne {
				position:relative;
				display:table-cell;
				padding:10px 25px 0 25px;
				transition:0.3s ease-out;
			}
			.pourNousContacterForm .colonne.cl100 {
				width:100%;
				padding-top:30px;
			}
			.pourNousContacterForm .colonne:first-child {
				padding-left:0;
			}
			.pourNousContacterForm .colonne:last-child {
				padding-right:0;
			}

			.pourNousContacterForm .placeholderFloating {
				position:absolute; top:0;
				padding:7px 0 0 13px;
				font-size:1.5rem; color:#E85A2C;
				transition:all 200ms;
			}

			.formControl:focus + .placeholderFloating,
			.formControl:valid + .placeholderFloating,
			.formControlArea:focus + .placeholderFloating,
			.formControlArea:valid + .placeholderFloating {
				font-size:1.5rem; color:#E85A2C; outline:none; padding-top:1px;
			}

			.pourNousContacterForm .colonne input[type=text] {
				position:relative;
				margin:0 10px; padding:0.9375em 0 0 0;
				width:calc(100% - 20px); height:60px;
				border:0px;
				background-color:#1D3FA0;
				font-size:1.5rem; font-weight:400; color:white;
				outline:none;
			}
			.pourNousContacterForm .colonne label {
				position:absolute; /*left:15px;*/ top:5px;
				display:block;
				font-family:Nunito; font-size:1.6875rem; font-weight:700; color:#E85A2C; letter-spacing:3px;
				cursor:text;
				transition:all 0.5s ease-in-out;
			}
			.pourNousContacterForm .colonne input:focus + label, 
			.pourNousContacterForm .colonne textarea:focus + label {
				/*font-size:1.45rem; cursor:default;*/
			}

		.pourNousContacterForm .labelVousDesirez {
			display:block; padding-left:10px;
			font-family:Nunito; font-size:1.5rem; font-weight:700; color:#E85A2C; letter-spacing:3px;
			transition:0.3s ease-out;
		}
		.pourNousContacterForm .ddlVousDesirez {
			margin:10px 10px 0 10px;
			width:calc(100% - 20px);
			font-size:1.5rem; font-weight:400; color:#E85A2C;
			color:#1D3FA0; background-color:white;
			border:none; border-radius:5px;
		}
			.pourNousContacterForm .ddlVousDesirez option { font-size:1.5rem; font-weight:400; }

			.pourNousContacterForm .colonne textarea {
				position:relative;
				margin:0 10px; padding:0.9375em 0;
				width:calc(100% - 20px); height:200px;
				border:0;
				background-color:#1D3FA0;
				font-size:1.5rem; font-weight:400; color:white;
				outline:none;
				resize:none;
			}
				.pourNousContacterForm .ligne .colonne label:valid {
					color:red;
				}

			.pourNousContacterForm .ligne4 ._cbPolitiqueConfidentialite {
				display:block;
				vertical-align:top;
				transition:0.3s ease-out;
			}
			.pourNousContacterForm .ligne4 ._cbPolitiqueConfidentialite input[type=checkbox] {
				display:inline-block;
				margin-left:15px;
				width:20px; height:20px;
				vertical-align:top;
			}
			.pourNousContacterForm .ligne4 ._cbPolitiqueConfidentialite label {
				display:inline-block;
				padding:0 10px 0 15px;
				width:calc(100% - 45px);
				vertical-align:top;
				font-family:Nunito; font-size:1.1875rem; font-weight:400; color:#F5F0E6; letter-spacing:2px;
				transition:0.3s ease-out;
			}
				.pourNousContacterForm .ligne4 ._cbPolitiqueConfidentialite label a { color:#E85A2C; }
				.pourNousContacterForm .ligne4 ._cbPolitiqueConfidentialite label a:hover { text-decoration:underline; }

			.pourNousContacterForm .ligne5 {
				text-align:right;
				padding-top:20px;
			}
				.pourNousContacterForm .ligne5 .lbEnvoyer {
					font-size:1.5rem; font-weight:600; color:white; 
					background-color:#E85A2C;
					padding:6px 20px 7px;
					border-radius:23px;
					transition:0.3s ease-out;
				}
				.pourNousContacterForm .ligne5 .lbEnvoyer:hover { color:#1D3FA0; }


			.pourNousContacterForm .msg {
				display:block;
				font-weight:bold;
				margin:25px auto 15px;
			}
			.pourNousContacterForm .msg.ok { padding:2px; border-radius:5px; background:white; font-weight:600; color:#00ff61; }
			.pourNousContacterForm .msg.ko { padding:2px; border-radius:5px; background:white; font-weight:600; color:red; }


		/*REGEX:TELEPHONE*/
		.pourNousContacterForm .ligne .regexTelephone {
			position:absolute; right:74px;
			margin-top:85px;
			width:500px;
			color:red;
		}

		/*REGEX:EMAIL*/
		.pourNousContacterForm .ligne .regexEmail {
			position:absolute;
			margin-top:85px;
			width:500px;
			color:red;
		}

		/*REGEX:MESSAGE*/
		.pourNousContacterForm .ligne .regexMessage {
			position:absolute;
			margin-top:250px;
			width:500px;
			color:red;
		}

		.pourNousContacterForm input.ctrlerreur,
		.pourNousContacterForm textarea.ctrlerreur,
		.pourNousContacterForm select.ctrlerreur { color:#ff6666; }
		.pourNousContacterForm input.ctrlerreur + label,
		.pourNousContacterForm textarea.ctrlerreur + label{ color:#ff6666; }

		.pourNousContacterForm .lblChampsObligatoires{ 
				display: block;
				text-align: right;
				margin-top: 1rem;
		}

/*#endregion*/


/*#region RESPONSIVE*/

@media all and (max-width:1200px) {

}

@media all and (max-width:640px) {

}

@media all and (max-width:450px) {

}

/*#endregion RESPONSIVE*/
